<template>
  <div class="my-image">
    <!-- 图片按钮 -->
    <div class="img_btn" @click="openDialog()">
      <img :src="value||defaultImage" alt />
    </div>
    <!-- 对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="720px">
      <!-- 选项卡 activeName绑定当前tabs激活的选项卡name属性值-->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="list">
          <!-- 切换按钮 -->
          <el-radio-group @change="changeCollect()" v-model="filterParams.collect" size="small">
            <el-radio-button :label="false">全部</el-radio-button>
            <el-radio-button :label="true">收藏</el-radio-button>
          </el-radio-group>
          <!-- 列表 -->
          <div class="img-list">
            <div
              @click="selectedImage(item.url)"
              :class="{selected:selectedImageUrl===item.url}"
              class="img-item"
              v-for="item in images"
              :key="item.id"
            >
              <img :src="item.url" alt />
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changePager"
            :current-page="filterParams.page"
            :page-size="filterParams.per_page"
            :total="total"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="上传图片" name="upload">
          <!-- 上传组件 -->
          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            name="image"
            :headers="headers"
            :show-file-list="false"
            :on-success="uploadImageSuccess"
          >
            <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImage()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import auth from '@/utils/auth'
// 导入图片
import defaultImage from '@/assets/default.png'
export default {
  name: 'my-image',
  props: ['value'],
  data () {
    return {
      // 控制对话框打开关闭
      dialogVisible: false,
      // 当前激活的选项卡name的值
      activeName: 'list',
      // 查询素材列表条件
      filterParams: {
        collect: false,
        page: 1,
        per_page: 8
      },
      // 图标列表
      images: [],
      // 总条数
      total: 0,
      // 选中图片地址
      selectedImageUrl: null,
      // 上传图片请求头
      headers: {
        Authorization: `Bearer ${auth.getUser().token}`
      },
      // 上传图片地址
      uploadImageUrl: null,
      // 确认图片地址
      // confirmImageUrl: defaultImage,
      // 默认图
      defaultImage
    }
  },
  methods: {
    // 确认图片
    confirmImage () {
      // 要根据当前激活选项卡去做不同的业务
      // 激活素材库
      if (this.activeName === 'list') {
        // 校验
        if (!this.selectedImageUrl) return this.$message.warning('请选中一张图片')
        // 预览
        // this.confirmImageUrl = this.selectedImageUrl
        // 传给父
        this.$emit('input', this.selectedImageUrl)
        // 关闭对话框
        this.dialogVisible = false
      }
      // 激活上传图片
      if (this.activeName === 'upload') {
        // 校验
        if (!this.uploadImageUrl) return this.$message.warning('请上传一张图片')
        // 预览
        // this.confirmImageUrl = this.uploadImageUrl
        // 传给父
        this.$emit('input', this.uploadImageUrl)
        // 关闭对话框
        this.dialogVisible = false
      }
      this.$emit('afterConfirm')
    },
    // 上传图片
    uploadImageSuccess (res) {
      this.$message.success('上传成功')
      this.uploadImageUrl = res.data.url
    },
    // 选中图片
    selectedImage (url) {
      this.selectedImageUrl = url
    },
    // 切换全部收藏
    changeCollect () {
      this.filterParams.page = 1
      this.getImages()
    },
    // 分页函数
    changePager (newPage) {
      this.filterParams.page = newPage
      this.getImages()
    },
    // 打开对话框
    openDialog () {
      // 打开对话框
      this.dialogVisible = true
      // 默认激活素材库
      this.activeName = 'list'
      // 默认第一页
      this.filterParams.page = 1
      // 获取素材列表数据
      this.getImages()
      // 清空 选中 上传 图片地址
      this.selectedImageUrl = null
      this.uploadImageUrl = null
    },
    // 获取图片列表
    async getImages () {
      const {
        data: { data }
      } = await this.$http.get('/user/images', { params: this.filterParams })
      this.images = data.results
      this.total = data.total_count
    }
  }
}
</script>

<style scoped lang='less'>
.my-image {
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
}
.img_btn {
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.img-list {
  line-height: 0;
  margin-bottom: 15px;
  .img-item {
    width: 150px;
    height: 120px;
    display: inline-block;
    border: 1px dashed #ddd;
    margin-top: 15px;
    margin-right: 15px;
    position: relative;
    &.selected {
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4) url(../assets/selected.png) no-repeat
          center / 50px 50px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
/deep/ .el-dialog__body {
  padding-bottom: 0;
}
</style>
